import { mapGetters } from 'vuex';
import pagination from "@/components/Pagination";
import warningList from "@/business-components/warning-list/warning-list";
import playTrack from "@/business-components/play-track/play-track";
import { getCarDetailInfoApi, getCarAlarmInfoApi } from './car-detail.service';
import { alertMessage, alertWithCallback } from "@/utils/utils";
import { releaseAlertApi } from "@/views/car-manage/car.service";

export default {
  name: 'select-province',
  components: { pagination, warningList, playTrack },
  props: {
    vehicleId: {
      type: Number,
      default: 0
    },
    equipId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      file_url: process.env.VUE_APP_FILE_URL, // 头像url
      recordNum: 10, // 分页组件默认的页数, 分页里的select默认10, 20, 50
      totalNum: 0, // 数据总数
      pageNum: 1, // 页数
      showDialog: true, // 是否显示弹窗
      currentRow: null, // 选中当前行
      searchCriteria: {}, // 搜索条件
      map: null, // 地图组件
      activeName: 'firstTab', // 选中tab
      showPlayTrackDialog: false, // 轨迹回放
      data: [], // 报警数据列表
      detailInfo: {}, // 车辆实时数据
      realTimeInfo: {}, // 实时信息
      pressure: {}, // 压力信息
      selectedTrack: [], // 选中的轨迹
      marker: null // 点信息
    }
  },
  computed: {
    ...mapGetters([
      'codesCheck'
    ]),
    showDialogFlag: {
      get() {
        return this.showDialog
      },
      set(val) {
        this.$emit('update:showDialog', val)
      }
    }
  },
  mounted() {
    this.getCarDetailInfo();
    this.intervalInstance = setInterval(() => {
      this.getRealTimeInfo();
    }, 5000)
  },
  created() {
    // 第一次加载获取网点列表
    this.getDataList();
  },
  methods: {
    // 获取车辆详情
    getCarDetailInfo() {
      getCarDetailInfoApi(this.vehicleId, this.equipId).then(res => {
        this.detailInfo = res.data;
        this.realTimeInfo = res.data.realTimeInfo ? res.data.realTimeInfo : {};
        this.pressure = this.realTimeInfo.pressure ? this.realTimeInfo.pressure : {};
        this.initMap();
      })
    },

    getRealTimeInfo() {
      getCarDetailInfoApi(this.vehicleId, this.equipId).then(res => {
        this.realTimeInfo = res.data.realTimeInfo ? res.data.realTimeInfo : {};
        this.marker.setPosition([Number(this.realTimeInfo.lonAndLat.lng), Number(this.realTimeInfo.lonAndLat.lat)])
      })
    },

    // 关闭dialog时需要告诉父组件隐藏弹窗
    closeDialog() {
      this.showDialog = false;
      this.$emit('close', true);
    },

    // 获取数据
    getDataList() {
      // 第一次打开时拿到缓存数据
      const data = {
        vehicleId: this.vehicleId,
        pageNum: this.pageNum,
        recordNum: this.recordNum
      }
      getCarAlarmInfoApi(data).then(res => {
        this.data = res.data;
        this.totalNum = res.dataCount;
      })
    },

    // 初始化地图
    initMap() {
      if (JSON.stringify(this.realTimeInfo) === "{}") {
        alertMessage('该车辆暂无地图信息', 'warning')
        return;
      }
      setTimeout(() => {
        this.map = new AMap.Map('map-container-car', {
          resizeEnable: true // 是否监控地图容器尺寸变化
        });
        let url = require("@/assets/imgs/car-img-normal.png");
        if (this.realTimeInfo.isOverFail == 1 || this.realTimeInfo.isWarningDis == 1 || this.realTimeInfo.isAirtightness == 1 || this.realTimeInfo.isPowerFail == 1) {
          url = require("@/assets/imgs/car-img.png");
        }
        this.marker = new AMap.Marker({
          map: this.map,
          position: [Number(this.realTimeInfo.lonAndLat.lng), Number(this.realTimeInfo.lonAndLat.lat)],
          // icon: "https://webapi.amap.com/images/car.png",
          icon: new AMap.Icon({
            size: new AMap.Size(64, 64),
            imageSize: new AMap.Size(64, 64),
            image: url // 添加 Icon 图标 URL
          }),
          autoRotation: true
          // angle: -90
        });
        this.map.setFitView();
      }, 200);
    },

    // 轨迹播放
    goMachinePlayback(trackList) {
      this.showPlayTrackDialog = true;
      this.selectedTrack = trackList;
    },

    // 跳转到全部报警
    moveToAlertList() {
      this.$router.push({ path: '/car-manage/alert-list', query: { carPlate: this.detailInfo.licensePlate }});
    },

    // 解除报警
    releaseAlert(id) {
      alertWithCallback('确认解除警报吗?', '').then(yes => {
        if (yes) {
          releaseAlertApi(id).then(res => {
            this.getDataList();
            alertMessage(res.message)
          })
        }
      }).catch(() => { }); // 关闭confirm框的回调，不处理的话会报一个js error
    }
  }
}
